<template>
  <div class="monitor-page">
    <Card class="search-banner">
      <table-search
        :queryFormItem="queryFormItem"
        :collapseFormItem="collapseFormItem"
        :data="filter"
        :labelWidth="labelWidth"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
      ></table-search>
    </Card>
    <Row :gutter="6" class="top-part">
      <Col span="12" style="height:100%">
          <div class="bigShow" @click="showBig = true">
            <small-card :data="energyInfo"></small-card>
          </div>
      </Col>
      <Col span="12" style="height:100%">
        <Card>
          <starLine
            :config="lineConfig"
            :language="lineLanguage"
            :data="chartData"
          ></starLine>
        </Card>
      </Col>
    </Row>
    <cfg-sheet v-bind="bindConfig"></cfg-sheet>
    <Modal v-model="showBig" width="1000">
        <big-card v-if="showBig" :isReturn="false" :data="energyInfo"></big-card>
        <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
import TableSearch from "public/components/table/parts/table-search";
import smallCard from './smallCard.vue'
import bigCard from './bigCard.vue'
import mixin from "@/pages/components/mixins/mixin";
export default {
  components: { TableSearch, smallCard, bigCard },
  mixins: [mixin],
  props: {
    queryFormItem: {
      default: () => []
    },
    collapseFormItem: {
      default: () => []
    },
    type: {
      default: ''
    }
  },
  data() {
    return {
      showBig: false,
      filter: {},
      lineConfig: {
        type: "line",
        toolbox: false,
        xAxisNameLocation: "",
        boundaryGap: false,
        yAxisNameLocation: "end",
        legend: true,
        smooth: true,
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        grid: {
          bottom: 40,
        },
      },
      lineLanguage: {
        "en-US": {
          title: "",
          xAxisTitle: "",
          yAxisTitle: "value",
        },
        "zh-CN": {
          title: "",
          xAxisTitle: "",
          yAxisTitle: "数值",
        },
      },
      chartData: {},
      bindConfig: {
        showTotal: false,
        columns: [
          {
            type: "index",
            width: 70,
            align: "center",
          },
          {
            title: "能源名称",
            key: "sf_energyName",
            minWidth: 70,
          },
          {
            title: "能源编码",
            key: "sf_energyCode",
            minWidth: 80,
          },
          {
            title: "数值",
            key: "value",
            minWidth: 80,
          },
          {
            title: "时间",
            key: "time",
            minWidth: 80,
          },
          {
            title: "能源类别",
            key: "sf_energyType",
            minWidth: 80,
          },
          {
            title: "能源类别名称",
            key: "sf_energyTypeName",
            minWidth: 80,
          },
          {
            title: "采集点名称",
            key: "sf_pointName",
            minWidth: 80,
          },
        ],
        data: [],
      },
      labelWidth: 80,
      energyInfo: {
        accumulatedEnergy: {
          number: 2000,
          data: {
            categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            values: {
              Email: [120, 132, 101, 134, 90, 230, 210],
              "Union Ads": [220, 182, 191, 234, 290, 330, 310],
              "Video Ads": [150, 232, 201, 154, 190, 330, 410],
              Direct: [320, 332, 301, 334, 390, 330, 320],
            },
          }
        },
        energySameRadio: {
          number: 20,
          isAdd: false,
          data: {
            categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            values: {
              Email: [120, 132, 101, 134, 90, 230, 210],
              "Union Ads": [220, 182, 191, 234, 290, 330, 310],
              "Video Ads": [150, 232, 201, 154, 190, 330, 410],
              Direct: [320, 332, 301, 334, 390, 330, 320],
            },
          }
        },
        energyChainRadio: {
          number: 10,
          isAdd: true,
          data: {
            categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            values: {
              Email: [120, 132, 101, 134, 90, 230, 210],
              "Union Ads": [220, 182, 191, 234, 290, 330, 310],
              "Video Ads": [150, 232, 201, 154, 190, 330, 410],
              Direct: [320, 332, 301, 334, 390, 330, 320],
            },
          }
        }
      }
    };
  },
  computed: {},
  methods: {
    handleSearch() {
      let { energyType, scale, timeRange, beginTime, endTime } = this.filter;
      if (!energyType || !scale || !timeRange) {
        this.$Message.error("请选择能源类型、粒度和时间区间");
        return;
      }
      if (!!timeRange && Array.isArray(timeRange)) {
        beginTime = timeRange[0];
        endTime = timeRange[1];
      }
      //当粒度是分钟，由于后台数据量大，只能选择一天时间
      let diffTime = this.tools.dayjs(endTime).diff(this.tools.dayjs(beginTime));
      if(scale == '分' && diffTime > 60*60*24*1000){
         this.$Message.error("粒度为分，最多选择一天时间");
         return;
      }
      let params = { ...this.filter, beginTime, endTime };
      this.$api.Custom.energyMonitor(params).then((res) => {
        if (!res) {
          return;
        }
        let { categories, values } = res;
        this.$set(this, "chartData", {
          categories,
          values: this.transValues(values),
        });
        this.$set(this.bindConfig, "data", res.dataList || []);
      });
    },
    handleReset() {
      this.filter = {};
    },
    transValues(values = []) {
      let obj = {};
      values.forEach((d) => {
        obj[d.name] = d.data;
      });
      return obj;
    }
  },
};
</script>
<style scoped lang="scss">
.monitor-page {
  padding-top: 10px;
}
.search-banner {
  margin-top: -10px;
}
.ivu-card {
  margin-bottom: 10px;
  p {
    text-align: center;
  }
}
.bigShow {
  width:100%;
  height: 333px;
  cursor: pointer;
}
::v-deep .ivu-modal-footer {
  border-top: none;
}
</style>
